<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>介绍</title>
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<style>
		body {
            font-size: 20px;
			background: #fff url("https://img.51miz.com/Video/2017/08/18/15/20170818155357_V107027_12e9b81c.jpg") no-repeat center center fixed;
			background-size: cover;
			color: #333;
		}

		.container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}

		h2 {
			font-size: 4rem;
			margin-bottom: 2rem;
		}

		.info {
			background-color: rgba(255, 255, 255, 0.8);
			padding: 2rem;
			border-radius: 2rem;
			box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
		}

		.image {
			background-color: rgba(255, 255, 255, 0.8);
			padding: 2rem;
			border-radius: 2rem;
			box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
			margin: 2rem 0;
		}

		label {
			font-size: 1.5rem;
			margin: 1rem 0;
		}

		a.btn.btn-success {
			font-size: 2rem;
			text-align: center;
			margin-top: 3rem;
			padding: 1rem 2rem;
			border-radius: 2rem;
		}

		@media screen and (max-width: 768px) {
			h2 { font-size: 3rem; }
			label { font-size: 1.2rem; }
			a.btn.btn-success { font-size: 1.8rem; }
		}

		@media screen and (max-width: 576px) {
			h2 {
				font-size: 2rem;
				margin-bottom: 1rem;
			}
			.info, .image {
				padding: 1rem;
				border-radius: 1rem;
				margin: 1rem 0;
			}
			label {
				font-size: 1.2rem;
				margin: 0.5rem 0;

			}
			a.btn.btn-success {
				font-size: 1.5rem;
				margin-top: 2rem;
				padding: 1rem 2rem;
				border-radius: 1.5rem;
			}
		}
        .carousel-inner img{
            display: block;
            width:800px ;
                        height: 400px;

        }
        .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img
        {
            height: 400px;

        }
	</style>
</head>

<body>
  <div class="container">
    <div class="info">
      <h2>白海豚介绍</h2>
      <label>白海豚，又称亚洲白海豚或中华白海豚，是世界上唯一一种生活在咸水中的鲸类，是珍贵的海洋哺乳动物之一。中国东南沿海是世界白海豚最主要的分布区之一。白海豚体长2-3米，重量可达至500千克，背部为深灰色，腹部为白色，身体圆润。白海豚极少攻击人类，因而在中国南海岸被称为“海天使”。</label>
    </div>
    <div id="photoCarousel" class="carousel slide image" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#photoCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#photoCarousel" data-slide-to="1"></li>
        <li data-target="#photoCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.9CNBG8twkruvuWn_sD4E4wHaEw?pid=ImgDet&rs=1" alt="白海豚照片" width="800" height="400">
          </div>
          <div class="item">
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.467040185f03e88b03ab6de3792c7830?rik=UVM%2f0osQ1HpOOQ&riu=http%3a%2f%2flibrary.ouc.edu.cn%2foceanbio%2fzhanguan%2fimages%2fhaishou_08_09_03.jpg&ehk=%2f88mCD8a%2b0Nafm%2ffGvRhUoCFTuQ58WiAWVBLgq6Du1Y%3d&risl=&pid=ImgRaw&r=0" alt="白海豚照片" width="800" height="400">
          </div>
          <div class="item">
            <img src="https://picx.zhimg.com/v2-3e0334efe10e2b7eb03bdc64c7cc208b_1440w.jpg?source=172ae18b" alt="白海豚照片" width="800" height="400">
          </div>
        </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#photoCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">上一个</span>
      </a>
      <a class="right carousel-control" href="#photoCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">下一个</span>
      </a>
    </div>
    <a class="btn btn-success" href="{{ url_for('about') }}">白海豚识别>></a>
  </div>

  <!-- 引入jQuery和Bootstrap的JS文件 -->
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>